<template>
  <div id="mine">
    <div class="row">
      <div class="r-up">
        <div class="avatar-box">
          <img :src="headImg" alt="">
          <p class="name-role" >
            {{nickName}} <span v-if="level>1">{{level == 1 ? '普通会员' : level == 2 ? 'VIP' : level == 3 ? '侍酒师' : level == 4 ? '银牌代理' : level == 5 ? '金牌代理' : '区域总代'}}</span>
          </p>
        </div>

        <div class="edit-box" v-if="level>1">
          <router-link to="/modifyPersonal">
            <img src="../../assets/images/edit_avatar.png" alt="">
          </router-link>
        </div>
      </div>
      <div class="r-down">
        <div class="rd-left" @click="toMyWalletDetail()">
          <p>今日总收入</p>
          <p><span class="text-red">{{today}}</span>元</p>
        </div>
        <div class="rd-right" @click="toMyWallet()">
          <p>我的总收入</p>
          <p><span class="text-red">{{sum}}</span>元</p>
        </div>
      </div>
    </div>
    <!--我的订单-->
    <div class="row10">
      <div class="order-title">
        <div class="ct-left">我的订单</div>
        <router-link to="/myOrder/?sid=99">
          <div class="ct-right"><span>全部订单</span><i class="arrow-right"></i></div>
        </router-link>
      </div>
      <ul class="o-ul">
        <li :key="index" v-for="(item,index) in orderStatus">
          <router-link :to="'/myOrder/?sid='+index">
            <div class="status-box">
              <img :src="item.pic" alt="">
              <p class="classify-name">{{item.status}}</p>
              <span v-if="item.num!=0">{{item.num}}</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 我的排名-->
    <div class="content-box" v-if="level>2">
      <div class="order-title">
        <div class="ct-left">我的排名</div>
        <!--<router-link to="/ranking">-->
        <!--<div class="ct-right"><span>全部排名</span><i class="arrow-right"></i></div>-->
        <!--</router-link>-->
      </div>
      <div class="cb-content">
        <ul class="tab-box">
          <li v-for="(item,index) in sortName" @click="isName=index,changeTab(index)">
            <span :class="{on:isName==index}">{{item}}</span>
          </li>
        </ul>
        <!--tab内容切换区域-->
        <div class="tab-content">
          <template v-if="isName==0">
            <ul class="sort-num">
              <li>
                <p class="p1-color">
                  <span class="sn-num"> <countup :start-val="999" :end-val="dayRankl" :duration="1"></countup></span> 名
                </p>
                <p>本地排名</p>
              </li>
              <li>
                <p class="p2-color">
                  <span class="sn-num"><countup :start-val="999" :end-val="dayRankr" :duration="1"></countup></span>名
                </p>
                <p>全国排名</p>
              </li>
            </ul>
          </template>
          <template v-if="isName==1">
            <ul class="sort-num">
              <li>
                <p class="p1-color">
                  <span class="sn-num"> <countup :start-val="0" :end-val="moonRankl" :duration="1"></countup></span> 名
                </p>
                <p>本地排名</p>
              </li>
              <li>
                <p class="p2-color">
                  <span class="sn-num"><countup :start-val="0" :end-val="moonRankr" :duration="1"></countup></span>名
                </p>
                <p>全国排名</p>
              </li>
            </ul>
          </template>
          <template v-if="isName==2">
            <ul class="sort-num">
              <li>
                <p class="p1-color">
                  <span class="sn-num"> <countup :start-val="999" :end-val="yealRankl" :duration="1"></countup></span> 名
                </p>
                <p>本地排名</p>
              </li>
              <li>
                <p class="p2-color">
                  <span class="sn-num"><countup :start-val="999" :end-val="yealRankr" :duration="1"></countup></span>名
                </p>
                <p>全国排名</p>
              </li>
            </ul>
          </template>
        </div>
      </div>
    </div>
    <!--功能  钱包-->
    <div class="seesion">
      <router-link to="/myWallet">
        <div class="s-row none-border">
          <div class="sr-left">
            <img src="../../assets/images/wallet_icon.png" alt="">
            <span>我的钱包</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
    </div>
    <!--免费注册会员-->
    <div class="seesion" v-if="level==1">
      <router-link to="/registerMember">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/member_icon.png" alt="">
            <span>免费注册会员</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
    </div>
    <!--我要成为品鉴师-->
    <!--<div class="seesion" v-if="level==2">-->
      <!--<router-link to="">-->
        <!--<div class="s-row">-->
          <!--<div class="sr-left">-->
            <!--<img src="../../assets/images/member_icon.png" alt="">-->
            <!--<span>我要成为品鉴师</span>-->
          <!--</div>-->
          <!--<div class="sr-right">-->
            <!--<i class="arrow-right"></i>-->
          <!--</div>-->
        <!--</div>-->
      <!--</router-link>-->
    <!--</div>-->
    <!--功能  接单 业务 团队-->
    <div class="seesion" v-if="level>2">
      <router-link to="/orderTaking" v-if="level==3">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/is_working.png" alt="">
            <span>是否开店</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/myBusiness">

        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/my_business.png" alt="">
            <span>我的业务</span>
          </div>
          <div class="sr-right">
            <span class="new-tiops" v-if="num>0">{{num}}</span>
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/myTeam" v-if="level>3">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/my_team.png" alt="">
            <span>我的团队</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
    </div>
    <!--功能  邀请 库存 加盟 申请个代-->
    <div class="seesion" v-if="level>1">
      <router-link to="/newly">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/invitation_icon.png" alt="">
            <span>邀请函</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/myStock">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/stock_icon.png" alt="">
            <span>库存管理</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/apply" v-if="level<6">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/league_icon.png" alt="">
            <span>申请区域加盟</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/apply" v-if="false">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/league_icon.png" alt="">
            <span>申请区域加盟</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
    </div>
    <!--功能  我的地址-->
    <div class="seesion" v-if="level>1">
      <router-link to="/myAddress">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/address_icon.png" alt="">
            <span>我的收货地址</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
    </div>
    <!--功能  升级 公司简介 联系我们-->
    <div class="seesion">
      <router-link to="/upgrade" v-if="level==2">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/upgrade_icon.png" alt="">
            <span>我要成为经销商</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/profile">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/company_profile.png" alt="">
            <span>公司简介</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
      <router-link to="/contact">
        <div class="s-row">
          <div class="sr-left">
            <img src="../../assets/images/contact_icon.png" alt="">
            <span>联系我们</span>
          </div>
          <div class="sr-right">
            <i class="arrow-right"></i>
          </div>
        </div>
      </router-link>
    </div>
    <!--底部footer-->
    <Footer tabNum="3"></Footer>
  </div>
</template>

<script>
  import {Countup} from "vux"
  import global from '../public/global.vue'

  export default {
    name: 'mine',
    components: {
      "countup": Countup,
      nickName: "",
      headImg: "",
      level: 1,
    },
    data() {
      return {
        orderStatus: [
          {pic: require('../../assets/images/status1.png'), status: "待付款", num: 0},
          {pic: require('../../assets/images/status2.png'), status: "待发货", num: 0},
          {pic: require('../../assets/images/status3.png'), status: "待收货", num: 0},
          {pic: require('../../assets/images/status4.png'), status: "待评价", num: 0},
        ],//我的订单状态
        sortName: ["当日排名", "当月排名", "本年排名"],
        isName: 0,
        sum: 0,
        today: 0,
        dayRankl: 0,
        dayRankr: 0,
        moonRankl: 0,
        moonRankr: 0,
        yealRankl: 0,
        yealRankr: 0,
        isShow: false,
        level: 1,
        num:0,//代接业务
      }
    },
    methods: {
      //排名标签切换
      changeTab(idx) {
//        console.log(idx);
      },
      toMyWallet(){
        this.$router.push({path: '/myWallet'});
      },
      toMyWalletDetail(){
        this.$router.push({path: '/transactionDetail'});
      }

      //获取排名


    },
    created: function () {
      let self = this;
      document.title = "我的"
      var uid = this.$route.query.uid;
      if (uid != undefined) {
        window.localStorage.setItem("shareId",uid);
        window.location.href="http://www.yingla9.com/dist/#/";
      }
      let text ="http://www.yingla9.com/dist/#/?uid="+window.localStorage.getItem("uid");
      global.wxShare("http://www.yingla9.com/dist/#/", "英拉助手",text, this);
      let url = global.apiUrl;
      var uid = global.getCookie("uid")
      this.$http.get(url + '/order/orderStatusCount', {
        params: {
          uid: uid,
        },
      }).then(res => {
//        console.log(res);
        if (res.data.code == 0) {
          let result = res.data.data;
//          console.log(res)
          let pData = this.orderStatus;
          pData[0].num = result.status0;
          pData[1].num = result.status1;
          pData[2].num = result.status2;
        }

      }).catch(function (err) {
        console.error(err);
      });
      this.nickName = window.localStorage.getItem("username");
      let pic = window.localStorage.getItem("headImg");
      this.headImg = pic;
      this.level = global.getCookie("level")
      //获取收入数据
      this.$http.get(url + '/account/countIncome').then(res => {
        if (res.data.code == 1) {
          self.sum = 0;
          self.today = 0;
        } else {
          self.sum = res.data.data.sum;
          self.today = res.data.data.today;
        }

      })
      if (this.level >= 3) {
        //获取今日排名
        this.$http.get(url + '/sommelier/sommelierRank?uid=' + uid + "&type=1").then(res => {
          self.dayRankl = res.data.data.localRank;
          self.dayRankr = res.data.data.nationalRank;

        })
        this.$http.get(url + '/sommelier/sommelierRank?uid=' + uid + "&type=2").then(res => {
          self.moonRankl = res.data.data.localRank;
          self.moonRankr = res.data.data.nationalRank;

        })
        this.$http.get(url + '/sommelier/sommelierRank?uid=' + uid + "&type=3").then(res => {
          self.yealRankl = res.data.data.localRank;
          self.yealRankr = res.data.data.nationalRank;

        })
        this.isShow = true;
      }
      this.$http.get(url+"/business/myBusinessOrder",{
        params:{
          uid:uid,
          type:0
        }
      }).then(res=>{
        if(res.data.code==0){
          this.num=res.data.data.length;
        }
      }).catch(function(err){
        console.error(err)
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  #mine {
    position: absolute;
    width: 100%;
    min-height: 100%;
    padding-bottom: 60px;
    background: #f3f3f3;
    .row {
      width: 100%;
      background: #fff;
      margin-bottom: 10px;
      .r-up {
        position: relative;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #eee;
        .avatar-box {
          width: 90%;
          margin: 0 auto;
          padding: 5% 0;
          img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
          .name-role {
            font-size: 1.2rem;
            font-weight: bold;
            span {
              font-size: 0.9rem;
              font-weight: 200;
              color: #fff;
              background: #FB3F40;
              padding: 0 6px;
              border-radius: 30px;
            }
          }
        }
        .edit-box {
          position: absolute;
          top: 8%;
          right: 5%;
          img {
            width: 26px;
            height: 26px;
          }
        }
      }
      .r-down {
        width: 100%;
        padding: 3% 10px;
        display: flex;
        text-align: center;
        font-size: 0.9rem;
      }
      .rd-left {
        flex: 1;
        border-right: 1px solid #eee;
      }
      .rd-right {
        flex: 1;
      }
      .text-red {
        font-size: 0.85rem;
        color: #ff0000;
      }
    }
    /*公用padding*/
    .row10 {
      width: 100%;
      padding: 0 2.5%;
      background: #fff;
      margin-bottom: 10px;
    }
    /*我的订单*/
    .order-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      font-size: 1rem;
      border-bottom: 1px solid #eee;
      .ct-right {
        font-size: 0.85rem;
        color: #ff0000;
      }
    }
    .arrow-right {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-left: 1px solid #ff0000;
      border-bottom: 1px solid #ff0000;
      transform: rotateZ(-135deg);
      vertical-align: top;
      margin-top: 16px;
    }
    .o-ul {
      width: 100%;
      display: flex;
      li {
        flex: 1;
        padding: 3% 0;
        text-align: center;
        .status-box {
          position: relative;
          display: inline-block;
          margin: 0 auto;
          img {
            width: 60%;
          }
          .classify-name {
            font-size: 0.9rem;
          }
          span {
            position: absolute;
            top: -13%;
            right: 1%;
            display: inline-block;
            width: 15px;
            height: 15px;
            line-height: 15px;
            border-radius: 50%;
            background: #ff0000;
            font-size: 0.7rem;
            color: #fff;
          }
        }
      }
    }
    /*我的排名*/
    .content-box {
      width: 100%;
      padding: 0 2.5%;
      background: #fff;
      margin-bottom: 10px;
    }
    .sub-head {
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      font-size: 1rem;
    }
    .tab-box {
      width: 100%;
      height: 2.6rem;
      line-height: 2.6rem;
      /*border-bottom: 1px solid #f3f3f3;*/
      display: flex;
      li {
        width: 33.33%;
        text-align: center;
        font-size: 1rem;
        span {
          display: inline-block;
          height: 100%;
          color: #aaa;
          box-sizing: border-box;
        }
        .on {
          font-weight: bold;
          color: #d44242;
          border-bottom: 2px solid #d44242;
        }
      }
    }
    .tab-content {
      .sort-num {
        height: 6rem;
        display: flex;
        li {
          width: 50%;
          padding-top: 1rem;
          text-align: center;
          color: #333;
          p {
            font-size: 0.9rem;
          }
          .p1-color {
            color: #F46464;
            .sn-num {
              font-size: 2rem;
            }
          }
          .p2-color {
            color: #BF98EC;
            .sn-num {
              font-size: 2rem;
            }
          }
        }
      }
    }
    /*功能模块*/
    .seesion {
      width: 100%;
      padding: 0 2.5%;
      background: #fff;
      margin-bottom: 10px;
      .s-row {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        box-sizing: content-box;
        font-size: 1rem;
        .sr-left {
          img {
            width: 1.6rem;
            height: 1.6rem;
            vertical-align: middle;
          }
          span {
            color: #333;
            vertical-align: middle;
          }
        }
        .sr-right {
          .new-tiops{
            display: inline-block;
            width:20px;
            height:20px;
            line-height: 20px;
            border-radius: 50%;
            background:#d44242;
            text-align: center;
            font-size: 0.8rem;
            color:#fff;
          }
          i {
            border-color: #aaa;
            margin-top: 22px;
          }
        }
      }
      .none-border {
        border: none;
      }
    }
  }
</style>
